<template>
  <div class="home">
    <head-cont></head-cont>
    <banner></banner>
    <section class="advantage" style="font-size:0;">
      <h2>
        <span class="title">CORE STRENGTHS</span>
        <span class="main">羽戈科技核心优势</span>
      </h2>
      <div class="advantage-item">
        <img src="../../assets/image/icon/1.png" alt="">
        <h4>AI+大数据+机器人</h4>
        <div>
          The experience of top scientists encapsulates the process of machine learning.
        </div>
        <div>顶尖科学家的经验封装，机器学习流程全闭环</div>
      </div>
      <div class="advantage-item" style="margin:0 60px;">
        <img src="../../assets/image/icon/2.png" alt="">
        <h4>低成本部署，分布式架构</h4>
        <div>
          Low cost deployment, distributed architecture. 
        </div>
        <div>低成本部署，分布式架构</div>
      </div>
      <div class="advantage-item">
        <img src="../../assets/image/icon/3.png" alt="">
        <h4>灵活可伸缩的计算能力</h4>
        <div>
          Flexible and scalable computing power.
        </div>
        <div>全流程实现从数据处理、模型建立、模型上线到模型自学习的机器学习全生命周期管理</div>
      </div>
      <section class="advantage-info pos-rel">
        <span class="pos1"></span>
        <span class="pos"></span>
        <div class="info-text">
          智能行业的发展历程中，不断有人将原来存在于实验室中的算法应用于商业中，姿态矫正算法作为2017年才刚刚公开代码的算法，羽戈科技明锐地发现了这一算法模型是可以应用于体育培训行业中，并首先将这一算法实现在了交互界面应用中，这一应用可以移植到任何界面中，真正实现端到端的无界跨越。
        </div>
      </section>
    </section>
    <section class="product">
      <div class="product-main">
        <h2>
          <span class="title">PRODUCT CENTER</span>
          <span class="main">产品中心</span>
        </h2>
        <swiper class="banner-swiper" :options="swiperOption" ref="mySwiper">
          <!-- slides -->
          <swiper-slide>
            <div class="swiper-g-item pos-rel">
              <img src="../../assets/image/p.png" alt="">
              <section class="product-introduction">
                <h5>教练机1.0(已进入测试阶段)</h5>
                <div class="text">
                  本产品是一款基于视觉AI算法的姿态矫正云计算的交互界面机器人。通过体育培训公司提供的标准化教材体系，将这套体系的内容进行提取，建立数据样本库，通过产品自带的摄像头进行姿态捕捉，将捕捉到的图片进行姿态提取，提取之后与样本库内数据进行比对，进而生成。
                </div>
              </section>
            </div>
          </swiper-slide>
          <div class="swiper-button-prev" slot="button-prev" @click="sildeHandle(0)"></div>
          <div class="swiper-button-next" slot="button-next" @click="sildeHandle(1)"></div>
        </swiper>
      </div>
    </section>
    <section class="about">
      <div class="about-main pos-rel">
        <h2 class="about-us">
          <span class="title">ABOUT US</span>
          <span class="text">关于我们</span>
        </h2>
        <img draggable="false" class="photo" src="../../assets/image/photo.png" alt="">
        <div class="about-inner">
          <div>
            羽戈科技是一家致力于智能体育相关产品研发的公司，专注于为体育培训机构提供智能化培训解决方案，为体育运动，舞蹈等运动培训行业研发智能化、可交互、易用的替代教学、辅助教学功能的智能硬件设备、软件系统等。                    
          </div>
          <div>
            羽戈科技团队的主要成员都是来自于北京理工大学，秉持德以明理，学以精工的校训，与大多数校友投身国防不同，我们选择的是投身创业，实业兴邦。我们不一样，选择的不一样，但我们又一样，报效祖国，砥砺前行，为实现中国制造2025贡献自己的绵薄之力。            
          </div>
          <button class="more-about">查看更多</button>
        </div>
      </div>
    </section>
    <section class="news">
      <h2>
        <span class="title">NEWS CENTER</span>
        <span class="main">新闻中心</span>
      </h2>
      <section class="news-main">
        <header class="clearfix">
          <h6 class="fl">羽戈新闻</h6>
          <span class="fr more-news">MORE+</span>
        </header>
        <div class="news-waper clearfix">
          <div class="news-top fl">
            <img src="../../assets/image/n.png" alt="">
            <div class="title">与羽戈科技合作你想好了吗？</div>
            <div class="text">
              羽戈科技渴望的合作对象是深耕体育培训很多年，渴望寻求新突破的体育培训公司，
              或者是致力于成为智慧体育培训公司，却苦于自己的技术实力不足以完成的
              羽戈科技渴望的合作对象是深耕体育培训很多年，渴望寻求新突破的体育培训公司，
              或者是致力于成为智慧体育培训公司，却苦于自己的技术实力不足以完成的
            </div>
          </div>
          <ul class="news-list fl">
            <li class="news-item clearfix" @click="gotoInfo(1)">
              <div class="date fl">
                <span class="day">19</span>
                <span>2018/04</span>
              </div>
              <div class="news-item-info fl">
                <div class="title">与羽戈科技合作你想好了吗？</div>
                <div class="text">
                  羽戈科技渴望的合作对象是深耕体育培训很多年，渴望寻求新突破的体育培训公司，
                  或者是致力于成为智慧体育培训公司，却苦于自己的技术实力不足以完成的
                  羽戈科技渴望的合作对象是深耕体育培训很多年，渴望寻求新突破的体育培训公司，
                  或者是致力于成为智慧体育培训公司，却苦于自己的技术实力不足以完成的
                </div>
              </div>
            </li>
          </ul>
        </div>
      </section>
    </section>
    <foot-cont></foot-cont>
  </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import headCont from '@/components/header'
import banner from '@/view/home/banner'
import footCont from '@/components/footer'
export default {
  components:{
    headCont,
    banner,
    swiper,
    swiperSlide,
    footCont
  },
  data() {
    return {
      swiperOption: {
        loop : true,
      }
    }
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    }
  },
  methods:{
    sildeHandle(n){
      if (n) {
        this.swiper.slideNext();
      }else{
        this.swiper.slidePrev();
      }
    },
    gotoInfo(id){
      this.$router.push({path:'/news',query:{id}})
    }
  }
}
</script>
<style scoped>
.advantage{
  height:730px;
  width:1200px;
  margin:0 auto;
  padding: 54px 0;
  box-sizing: border-box;
}
.advantage h2{
  text-align: center;
  color:#666;
}
.advantage h2 span{
  display: block;
}
.advantage .title{
  font-size: 48px;
}
.advantage .main{
  font-size: 30px;
}
.advantage-item{
  width:360px;
  height:362px;
  padding:30px;
  text-align: center;
  color:#999;
  display: inline-block;
  box-sizing: border-box;
  overflow: hidden;
}
.advantage-item h4{
  font-size: 24px;
  line-height: 60px;
  color:#666;
}
.advantage-item div{
  font-size: 14px;
  line-height: 24px;
  /* word-break:break-all; */
}
.advantage-item img{
  margin:25px 0;
}
.advantage-info{
  width:990px;
  height:154px;
  margin:0 auto;
}
.advantage-info span{
  position: absolute;
  width:50px;
  height:50px;
}
.advantage-info .pos1{
  background: url('../../assets/image/icon/4.png') no-repeat;
  top:0;
  left:0;
}
.advantage-info .pos{
  background: url('../../assets/image/icon/5.png') no-repeat;
  bottom: 0;
  right:0;
}
.advantage-info .info-text{
  width:810px;
  font-size: 14px;
  line-height: 22px;
  color:#666;
  text-align: center;
  margin:0 auto;
  padding:40px 0;
}
.product{
  height:760px;
  background: url('../../assets/image/bg.png') no-repeat;
}
.product-main{
  width:1200px;
  height:760px;
  margin:0 auto;
  padding:78px 0;
  box-sizing: border-box;
}
.product-main h2{
  margin-bottom: 60px;
}
.product-main h2 span{
  display: block;
  color:#fff;
  text-align: center;
}
.product-main .title{
  font-size: 48px;
}
.product-main .mian{
  font-size: 30px;
}
.swiper-g-item{
  width:1040px;
  height:418px;
  margin:0 auto;
}
.swiper-g-item img{
  width:561px;
  height:387px;
}
.swiper-g-item .product-introduction{
  width:522px;
  height:340px;
  background-color: #fff;
  position: absolute;
  top:39px;
  left:518px;
  z-index: 888;
  padding:25px 50px;
  box-sizing: border-box;
}
.product-introduction h5{
  font-size: 24px;
  color:#666;
  margin-bottom: 49px;
}
.product-introduction .text{
  font-size: 14px;
  line-height: 30px;
  color:#666;
  text-indent: 24px;
}
.swiper-button-prev{
  background-image: url('../../assets/image/icon/6.png') !important;
  background-size: 27px 27px;
}
.swiper-button-next{
  background-image: url('../../assets/image/icon/7.png') !important;
  background-size: 27px 27px;
}
.about{
  width:1200px;
  height:673px;
  margin: 0 auto;
  overflow: hidden;
}
.about-main{
  width:860px;
  height:500px;
  margin:84px 0 0 106px;
  padding:116px 315px 22px 161px;
  border:2px solid #82aeff;
  box-sizing: border-box;
}
.about-us{
  width:244px;
  height:110px;
  background-color: #fff;
  position: absolute;
  top:205px;
  left:-106px;
}
.about-us span{
  display: block;
  text-align: center;
  background-image: linear-gradient(to bottom, #82aeff, #364bbf);
  -webkit-background-clip: text;
  color: transparent;
}
.about-us .title{
  font-size: 48px;
  line-height: 54px;
  font-family: arail;
}
.about-inner div{
  text-indent: 30px;
  font-size: 14px;
  line-height: 30px;
  color:#666;
}
.about-main .photo{
  position: absolute;
  top:60px;
  left:578px;
}
.more-about{
  background-color: #4d68d2;
  border:0;
  width:92px;
  height:23px;
  border-radius: 8px;
  color:#fff;
  margin:33px 176px;
  cursor: pointer;
}
.news{
  width:1200px;
  height:630px;
  margin:0 auto;
}
.news h2 span{
  display: block;
  color:#666;
  text-align: center;
}
.news .title{
  font-size: 48px;
}
.news .main{
  font-size: 30px;
}
.news-main{
  margin-top:20px;
  height:440px;
}
.news-main header{
  border-bottom: 1px solid #c0c0c2;
  margin-bottom:20px;
}
.news-main h6{
  font-size: 24px;
  line-height: 50px;
  color:#364bbf;
  border-bottom:2px solid #364bbf;
}
.more-news{
  font-size: 18px;
  line-height: 50px;
  color:#666;
  cursor: pointer;
}
.news-top{
  width:560px;
  height:380px;
  padding:18px 0;
  margin-right: 76px;
  cursor: pointer;
}
.news-top img{
  width:560px;
  height:260px;
}
.news-top .title{
  font-size: 18px;
  font-weight: bold;
  line-height: 48px;
}
/* 多行溢出隐藏 */
.news-top .text{
  font-size: 14px;
  color:#666;
  text-indent: 20px;
  position:relative;
  line-height:1.4em;
  height:4.2em;
  overflow:hidden;
}
.news-top .text::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 40px;
    background:url('http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png') repeat-y;
}
.news-list{
  width:564px;
}
.news-item{
  cursor: pointer;
  height:126px;
  width:100%;
  border-bottom: 1px solid #c5c5c5;
}
.news-item .date{
  width:54px;
  color:#82aeff;
  font-size: 14px;
  padding-top:22px;
  box-sizing: border-box;
}
.news-item .date span{
  display: block;
}
.news-item .date .day{
  font-size: 48px;
}
.news-item-info{
  margin-left:20px;
  padding-top:20px;
}
.news-item-info .title{
  font-size: 18px;
  font-weight: bold;
  line-height: 50px;
}
.news-item-info .text{
  width:480px;
  font-size: 14px;
  color:#666;
  text-indent: 20px;
  position:relative;
  line-height:1.4em;
  height:2.8em;
  overflow:hidden;
}
.news-item-info .text::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 40px;
    background:url('http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png') repeat-y;
}
</style>

